<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         #main {
            background-color: coral;
            margin: 0px auto;
            width: 500px;
        }

        #dv {
            /*position:relative;*/
            margin-left: 48px;
        }

        #btndv {
            margin-left: 422px;
        }

        .pContent {
            width: 422px;
            margin-left: 78px;
        }
    </style>
</head>
<body>
    <div id="main">
       <label for="nickname">昵称：</label><input type="text" name="nickname" id="nickname">
       <div id="dv">
           <textarea id="content" cols="50" rows="10" maxlength="500"></textarea>
       </div>
       <div id="btndv">
           <input type="checkbox" value="匿名" id="ni">匿名
           <input id="btn" type="button" value="发表">
       </div>
       <hr style="border:2px solid green">
    </div>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        // 获取元素
        $("#btn").click(function () {
            var $nickname = $("#nickname").val()
            var $content = $("#content").val()
            var $niname = $("#ni").prop("checked")
            if ($niname) {
                $nickname = "路人甲"
            }
            if ($nickname.length !== 0 && $content.length !==0) {
                $("<p id='pName'></p>").text($nickname + " " + new Date().toLocaleTimeString()).appendTo($("#main"));
                $("<p class='pContent'></p>").text($content).appendTo($("#main"))
                $("#nickname").val("")
                $("#content").val("")
            } else {
                alert("昵称和内容不能为空")
            }
        })
    </script>
</body>
</html>